<template>
  <div>
    <div class="upload-item"
         v-for="(item,index) in images2"
         :key="index">
         <div class="test">
          <img :src="item.url"
              @click="previewImg(item.url)"
              :preview="preview"
              width="100%"
              alt="">
         </div>
      <span
            @click="removeImg(item.name,index,item)"></span>
    </div>
    <div class="upload-item">
      <div class="test">
      <img src="@static/images/upload.png"
              width="100%"
           alt="">
      </div>
      <input type="file"
              multiple
              key="1"
              v-if="showUpload"
             :name="('file'+uploadIndex)"
             @change="upload">
      <input type="file"
              multiple
              key="2"
              v-else
             :name="('file'+uploadIndex)"
             @change="upload">
    </div>
    <el-dialog :visible.sync="flag" fullscreen center>
       <img :src="selectImg" alt="" width="100%">
     </el-dialog>
  </div>
</template>
<script>
export default {
  name: "upload",
  data() {
    return {
      selectImg:'',
      flag:false,
      uploadImgs: [], // 图片上传回传的照片
      preview: "", // 预览图片分组
      // uploadImgs: [], // 图片上传回传的照片
      uploadImgFormData: null, // 图片上传formData对象
      uploadIndex: 0,
      // baseurl: this.$axiosAjax.baseurl,
      baseurl: 'http://zcsms-sit.bosafe.com/',
      images2: [],
      showUpload:true
    };
  },
  props: {
    imgList: {
      default: ""
    },
    images: {
      default: () => []
    },
    uploadImgss: {
      default: () => []
    }
  },
  mounted(){
    this.uploadImgs=this.imgList
  },
  watch: {
    uploadImgss(val) {
      if (val) {
        val.forEach(item => {
          this.uploadImgs.push(item);
        });
      }
    },
    created() {
      this.uploadImgs = this.uploadImgss;
      this.preview = new Date().getTime();
      this.imgList.forEach(item => {
        this.uploadImgs.push(item);
      });
    }
  },
  methods: {
    clearimage () {
      this.images2 = []
       this.$emit("setFormData", this.images2.length, this.images2);
    },
    previewImg(url){//图片预览
      this.selectImg=url
      this.flag=true
    },
      // 上传
    upload(e) {
      for(const key in e.target.files) {
        if(!e.target.files.hasOwnProperty(key)) {
          this.showUpload = !this.showUpload
          return false
        }
        if(key !== "length") {
            let file = e.target.files[key];
            let param = new FormData();
            param.append("file", file);
            param.append('recordId',this.$store.state.illegalDepartId);
            if(this.$store.state.illegalType!=''){
              param.append('type',this.$store.state.illegalType);
            }
            // 上传弹框提示
            this.$vux.loading.show({
              text: '上传中...'
            });
            this.$axiosAjax.illegalUpload(param).then(res => {
                if (res.data.success){
                    this.images2.push({
                      name: res.data.result.fileName,
                      size: res.data.result.fileSize,
                      url: this.baseurl+'/'+res.data.result.relativePath,
                      id:res.data.result.id,
                    });
                    console.log("setFormData", this.images2.length, this.images2)
                  this.$emit("setFormData", this.images2.length, this.images2);
                  this.$vux.loading.hide();
                } else {
                  this.$vux.loading.hide();
                  this.$vux.alert.show({
                    content: '上传失败，请重试！',
                    dialogTransition: ''
                  });
                }
            }).catch(err => {
              this.$vux.loading.hide();
            });
        }
      }
    },
    // 删除
    removeImg(name, index,item) {
        var ids = {}
        var id=[]
        id.push(item.id)
        ids.id=id
        this.images2.splice(index, 1);
        this.$emit("setFormData", this.images2.length, this.images2);
        // 删除弹框提示
        this.$vux.loading.show({
          text: '删除中...'
        });
        this.$axiosAjax.illegalDelete(ids).then(res => {
            if (res.data.success == true) {
                this.$forceUpdate();
                this.$vux.loading.hide();
            } else {
              this.$vux.loading.hide();
              this.$vux.alert.show({
                content: '删除失败，请重试！',
                dialogTransition: ''
              });
            }
        }).catch(err => {
            this.$vux.loading.hide();
        })
    }
  }
};
</script>
<style lang="less" scoped>
  .test {
    width:56px;
    height:56px;
  }
</style>

